<script setup lang="ts">
import { useUserStore } from "@/store/modules/user";

const userStore = useUserStore();
const userInfo = {
  mobile: ref(""),
  password: ref(""),
};

const { mobile, password } = userInfo;
const handleLogin = async () => {
  const result = await userStore.login(reactive(userInfo));
  userStore.setToken(result.token);
};
</script>

<template>
  <form class="flex h-80 flex-col">
    <input
      v-model.trim="mobile"
      class="mx-auto border-0 border-b-2 border-green-400 border-b-[#989EB4] text-black placeholder-gray-300 focus:outline-none"
      type="text"
      placeholder="123456"
    />
    <input
      class="mx-auto bg-brand_standard text-[#FFFFFF]"
      type="submit"
      value="提交"
      @click="handleLogin"
    />
  </form>
  <van-row>
    <van-col class="bg-brand_standard" span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
  </van-row>
  <van-button type="primary" size="normal">主要按钮</van-button>
</template>

<style></style>
